<template>
  <div class="personnel-container w-100P h-100P flex-column">
    <div class="flex-row justify-between w-100P padding-lr-20 align-center pd-30 h-50">
      <!-- 查询条件 -->
      <div class="flex">
        <div class="justify-between pd-right-20">
          <span class="w-100 flex align-center fz-14">商品名称</span>
          <el-input
            v-model="form.productName"
            clearable
            class="input-width"
            placeholder="请输入商品名"
          />
        </div>
        <div class="justify-between ">
          <span class="w-100 flex align-center fz-14">产品类型</span>
          <div>
            <el-select v-model="form.productTypeId" clearable filterable class="w-100P">
              <el-option
                v-for="state in netTypeList"
                :key="state.id"
                :value="state.id"
                :label="state.typeName"
              />
            </el-select>
          </div>
        </div>
      </div>
      <div class="s-but">
        <el-button size="mini"  type="info" plain @click="getStockList()">查询</el-button>
        <el-button size="mini" class="reset" plain type="primary" @click="reset()">重置</el-button>
      </div>
    </div>
    <div class="parting-line"></div>
    <div class="flex-sub table-container pd-10">
      <div class="mg-bottom-20">
        <el-button size="mini" icon="el-icon-edit" type="primary" plain @click="maintainReport(-1)">
          新增
        </el-button>
        <el-button size="mini" icon="el-icon-upload" type="primary" plain @click="Template">
          导出模板
        </el-button>
        <el-button size="mini" icon="el-icon-folder-add" type="primary" plain @click="Import">
          导入报告
        </el-button>
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        header-cell-class-name="table-header-cell"
        fit
        highlight-current-row
        :max-height="600"
      >
        <el-table-column label="商品创建日期" align="left">
          <template slot-scope="scope">
            {{ scope.row.createTime | dateTimeOnly }}
          </template>
        </el-table-column>
        <el-table-column label="商品名称">
          <template slot-scope="scope">
            {{ scope.row.productName }}
          </template>
        </el-table-column>

        <el-table-column label="产品类型">
          <template slot-scope="scope">
            {{ scope.row.typeName }}
          </template>
        </el-table-column>
        <el-table-column label="产品规格">
          <template slot-scope="scope">
            {{ scope.row.specificationModel }}
          </template>
        </el-table-column>
        <el-table-column label="库存数量" align="center">
          <template slot-scope="scope">
            {{ scope.row.productCount }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="110" align="center">
          <template slot-scope="scope">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link blue">更多</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item divided @click.native="maintainReport(scope.row.id)">
                  修改
                </el-dropdown-item>
                <el-dropdown-item divided @click.native="deleteMsg(scope.row.id)">
                  删 除
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          background
          layout="total,prev, pager, next, jumper"
          :current-page="paging.pageNo"
          :page-size="paging.pageSize"
          :total="total"
          class=" pagination"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <stock
      ref="mystock"
      :typeDialog="typeDialog"
      :typeId="typeId"
      :title="typeTitle"
      :netTypeList="netTypeList"
      @dateDialog="handleCloseEdit"
      @Refresh="afterButter "
    />
  </div>
</template>
<script>
import stock from './components/stock'
import { getList, getUpList, DeleteCommodity } from './api'
export default {
  components: { stock },
  data() {
    return {
      listLoading: true, // 加载。。。
      list: [],
      typeDialog: false,
      typeTitle: '新增',
      typeId: '0',
      showDelete: true,
      paging: {
        pageSize: 10,
        pageNo: 1,
      },
      total: 10,
      form: {
        productName: '',
        productTypeId: '',
      },
      netTypeList: [],
    }
  },
  mounted() {
    this.afterButter()
  },
  methods: {
    // 重置内容
    reset() {
      this.paging = {
        pageSize: 10,
        pageNo: 1,
      }
      this.form = {
        productName: '',
        productTypeId: '',
      }
      this.getStockList()
    },
    //  afterButter
    afterButter() {
      this.getStockList()
      this.getUpData()
    },
    // 获取列表
    getStockList() {
      this.listLoading = true
      getList({ ...this.paging, productStatisticsVo: this.form }).then(res => {
        this.list = res.records
        this.pageNo = res.pageNo
        this.pageSize = res.pageSize
        this.total = res.total
        this.listLoading = false
      })
    },
    // 获取类型下拉
    getUpData() {
      getUpList().then(res => {
        console.log(res)
        this.netTypeList = res
      })
    },
    // 关闭弹框
    handleCloseEdit() {
      this.typeDialog = false
    },
    // 修改 新增
    maintainReport(id) {
      this.typeId = id + ''
      if (id === -1) {
        this.typeTitle = '新增'
      } else {
        this.typeTitle = '修改'
        this.$refs.mystock.drawPid(id)
      }
      this.typeDialog = true
    },
    // 删除
    deleteMsg(id) {
      this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      })
        .then(() => {
          DeleteCommodity({ tProductStatisticsId: id }).then(res => {
            if (res) {
              this.$message({
                type: 'success',
                message: '删除成功!',
              })
              this.afterButter()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 切换页面 下方分页
    handleCurrentChange(val) {
      this.paging.pageNo = val
      this.getStockList()
    },
    Template() {
      console.log('导出')
    },
    Import() {
      console.log('导出')
    },
  },
}
</script>
<style lang="scss" scoped>
.blue {
  color: #0084ee;
  cursor: pointer;
  font-weight: 600;
}

.parting-line {
  height: vh(13px);
  background: #f3f4f8;
}
.s-but .el-button {
  background: #d12d1f;
  color: #ffffff;
}
.s-but .el-button:hover {
  border: 1px solid #d12d1f;
  opacity: 0.9;
}
.s-but .el-button:active {
  border: #d12d1f;
}

.s-but .reset{
  background: #f2f2f2;
  color: #262626;
  border: 1px solid #bebebe;
}
.s-but .reset:hover{
  border: 1px solid #999;
}
</style>

